import React, { useState, useEffect } from 'react'
import style from '@/styles/first.module.css'
import { ArrowDown, UserO, Search } from '@react-vant/icons'
import { useRouter } from 'next/router'
const first = () => {
  const [list, setList] = useState<any[]>([])
  const [list1, setList1] = useState<any[]>([])
  const router = useRouter()
  useEffect(() => {
    setList([
      {
        title: '二手房',
        img: '/image/1.png',
      },
      {
        title: '新房',
        img: '/image/2.png',
      },
      {
        title: '租房',
        img: '/image/3.png',
      },
      {
        title: '卖房',
        img: '/image/4.png',
      },
      {
        title: '商铺办公',
        img: '/image/5.png',
      },
      {
        title: '找小区',
        img: '/image/6.png',
      },
    ]),
      setList1([
        {
          title: '找经纪人',
          img: '/c1.png',
        },
        {
          title: '问答',
          img: '/c2.png',
        },
        {
          title: '客服电话',
          img: '/c3.png',
        },
        {
          title: '房贷计算',
          img: '/c4.png',
        },
      ])
  }, [])
  return (
    <div className={style.first}>
      <header className={style.header}>
        <div className={style.top}>
          <button className={style.button} onClick={() => router.push('/address')}>
            广州
            <ArrowDown />
          </button>
          <UserO className={style.user} onClick={() => router.push('/Customer')} />
        </div>
        <div>
          <input type="text" placeholder="输入小区或商圈开始找房喽~" className={style.input} />
          <Search className={style.search} />
        </div>
      </header>
      <main className={style.main}>
        <div style={{ display: 'flex', flexShrink: '0', flexWrap: 'wrap', textAlign: 'center', marginTop: '10px' }}>
          {list.map((v, i) => {
            return (
              <dl key={i} style={{ width: '25%', height: 'auto', marginTop: '10px' }}>
                <dt>
                  <img src={v.img} alt="" style={{ width: '50px', height: '50px' }} />
                </dt>
                <dd>{v.title}</dd>
              </dl>
            )
          })}
        </div>
        <div>
          <p style={{ fontSize: '20px', margin: '20px', borderBottom: '1px solid #eee' }}>常用工具</p>
          <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center', textAlign: 'center' }}>
            {list1.map((v, i) => {
              return (
                <dl key={i}>
                  <dt>
                    <img src={v.img} alt="" style={{ width: '30px', height: '30px' }} />
                  </dt>
                  <dd>{v.title}</dd>
                </dl>
              )
            })}
          </div>
        </div>
      </main>
    </div>
  )
}

export default first
